<template>
  <div class="work-experience">
    <el-card>
      <h2>个人工作经验</h2>
      <el-timeline>
        <el-timeline-item
          v-for="(experience, index) in experiences"
          :key="index"
          :timestamp="experience.time"
          placement="top"
        >
          <h3>{{ experience.company }}</h3>
          <p>{{ experience.position }}</p>
          <p>{{ experience.description }}</p>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'WorkExperiencePage',
  data() {
    return {
      experiences: [
        {
          time: '2020 - 现在',
          company: '公司 A',
          position: '高级开发工程师',
          description: '负责系统架构设计和核心代码编写，带领团队完成多个项目。'
        },
        {
          time: '2018 - 2020',
          company: '公司 B',
          position: '中级开发工程师',
          description: '参与多个项目的开发和维护，负责前端和后端开发。'
        },
        {
          time: '2016 - 2018',
          company: '公司 C',
          position: '初级开发工程师',
          description: '负责项目的初级开发任务，包括代码编写和测试。'
        }
      ]
    };
  }
};
</script>

<style scoped>
.work-experience {
  padding: 20px;
}

.work-experience h2 {
  margin-bottom: 20px;
}

.work-experience p {
  margin: 0;
}
</style>
